<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>11-背景图片-位置-方位名词</title>
		<style type="text/css">
			/* 
				background-position:水平方向 垂直方向
				1.图片根据自己尺寸在固定宽高的盒子中显示时，如果不指定平铺，那么它
				默认是在左上角的
			*/
			.box{
				width:600px;
				height:600px;
				border:1px solid red;
				margin: 30px auto;
				background-image: url(images/1.jpg);
				/*不在水平和垂直方向平铺*/
				background-repeat: no-repeat;
				/*设置图片的位置-水平居左，垂直在顶部*/
				/* background-position:left top; */
				/*水平居左，垂直在居中*/
				/* background-position:left center; */
				/* 水平居右，垂直在底部 */
				background-position: right bottom;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
